<template>
  <div>
    <!-- 搜索和 新增按钮  -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="账号信息">
        <el-input
          v-model="formInline.account"
          placeholder="账号信息"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态信息">
        <el-select v-model="formInline.status" placeholder="状态信息">
          <el-option label="生效" value="y"></el-option>
          <el-option label="无效" value="n"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="addOne"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 点击新增(含编辑)后弹出的框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="500px">
      <el-form label-position="left" :model="editForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="editForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input show-password v-model="editForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="editForm.status" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save"
          >保 存</el-button
        >
      </div>
    </el-dialog>
    <!-- 对应表单信息 -->
    <el-table
      :data="tableData"
      highlight-current-row
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        sortable
        prop="id"
        label="id"
        width="40"
      ></el-table-column>
      <el-table-column
        prop="account"
        label="用户名"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="280"
      ></el-table-column>
      <el-table-column prop="status" label="状态" width="100"></el-table-column>
      <el-table-column
        prop="role_id"
        label="角色id"
        width="150"
      ></el-table-column>
      <el-table-column label="操作" width="300">
          <!-- 这个template表示的是 插槽，每一行都是不同的数据信息绑定 -->
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对应分页组件的信息  -->
    <pageinfo
      :num="pageinit.total"
      :currentPage="pageinit.currentPage"
      :pageSize="pageinit.pageSize"
      @changeSize="changeSize"
      @changeCurrent="changeCurrent"
    ></pageinfo>
  </div>
</template>

<script>
  import axios from "axios";
  import pageinfo from "@/components/system/pageinfo.vue";
  export default {
    data() {
      return {
        //表单显示的数据
        tableData: [],
        //分页数据 初始化的时候
        pageinit: {
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },
        //搜索框中的数据封装
        formInline: {
          account: "",
          status: "",
        },
        //用于决定弹窗的隐藏和显示
        dialogFormVisible: false,
        //新增和编辑的时候，页面中显示的内容和双向绑定的内容
        editForm: {
          account: "",
          password: "",
          status: "",
        },
        formLabelWidth: '80px'
      };
    },
    //钩子函数 在组件第一次渲染的时候才执行
    created() {
      this.findAllManager();
    },
    components: { pageinfo },
    methods: {
      //根据这个来改出编辑和删除方法
      handleClick(row) {
        console.log(row);
      },
      //初始化表单数据用
      findAllManager() {
        axios
          .get(
            "/rbacManager/manager/" +
              this.pageinit.currentPage +
              "/" +
              this.pageinit.pageSize
          )
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              //对综总数量进行赋值
              this.pageinit.total = res.data.data.total;
            }
          })
          .catch(() => {});
      },
      //子传父的方法值
      changeSize(val) {
        this.pageinit.pageSize = val;
        this.pageinit.currentPage = 1;
        // 重新调用获取数据方法
        this.findAllManager();
      },
      changeCurrent(val) {
        this.pageinit.currentPage = val;
        // 重新调用获取数据方法
        this.findAllManager();
      },
      search(){
        //搜索方法
      },
      //新增按钮方法
      addOne(){
        this.dialogFormVisible = true
        this.editForm.account = ''
        this.editForm.password = ''
        this.editForm.status = ''
      },
      //对话框，点击保存后 存入数据库
      save(){
        this.$axios.post('/rbacManager/manager',this.editForm).then(res=>{
            console.log(res);
            if(res.data.code == 200){
                 this.$message({
                        message: res.data.message,
                        type: 'success'
                 });
                 //关闭弹窗
                 this.dialogFormVisible = false;
                 //重新刷新下表单数据
                 this.findAllManager();
            }
        }).catch();
      }
    },
    watch: {
      $route(to, from) {
        console.log(to);
        console.log(from);
      },
    },
  };
</script>